<!-- 分析结构从图中可看出:
	1、使用了 fixed 定位
	2、距离底部有安全距离
	3、有 icon 突出
-->
<template>
	<view class="flex flex-col" :class="float?'tabBar-body':'tabBar-body-bottom'">
		<view class="flex">
			<view class="tqb-tabBar-item">
				<view class="tabBar-item-body" v-for="tabItem in tabBarList" :key="tabItem.index"
					:class="{float: tabItem?.float, active: current === tabItem.index}" @click="onClick(tabItem)">
					<view class="tabBar-item-icon">
						<uni-icons :type="tabItem.icon" :size="tabItem?.float?48:28"
							:color="current === tabItem.index ? '#4cd964': ''" />
					</view>
					<view class="tab-bar-text">{{ tabItem.title }}</view>
				</view>
			</view>
		</view>

		<!-- 添加主要内容与安全距离：安全距离可以使用 uni内置的 API uni.getSystemInfoSync() -->
		<view :style="`height: ${safeAreaInsets?.bottom}rpx`"></view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";

	/*分析组件看需要传入的数据:
			tab 名
			tab 图标
			tab 索引
			tab 选中触发方法 主要针对中间一个扫一扫 点击之后不跳转只执行方法
			tab 是否浮动 针对扫一扫标签浮动 其他不浮动的情况
	*/
	interface TabItemType {
		index : number
		title : string
		icon : string
		float ?: boolean
		onClick ?: Function
	}

	const props = defineProps({
		float: {
			type: Boolean,
			value: false
		},
		tabBarList: {
			type: Array<TabItemType>,
			default: []
		},
		current: {
			type: Number,
			value: 1
		}
	});
	console.log(props.current)

	const { safeAreaInsets } = uni.getSystemInfoSync();

	function onClick(tabItem : TabItemType) {
		if (props.current == tabItem.index) return;
		tabItem?.onClick()
		if (tabItem.index === 2) return
		props.current = tabItem.index
	}
</script>

<style lang="scss" scoped>
	// 添加样式 突出中间 icon，并且底部对齐，内容填充均匀

	.tabBar-body {
		// tabbar组件 固定到底部
		border-radius: 80rpx;
		background: white;
		position: fixed;
		bottom: 50rpx;
		width: 95%;
		left: 50%;
		transform: translateX(-50%);
		padding: 20rpx 0;
		box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
	}

	.tabBar-body-bottom {
		padding: 20rpx 0;
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
	}

	.tqb-tabBar-item {
		flex: 1;
		display: flex;
		justify-content: space-evenly;
		text-align: center;
		align-items: flex-end;

		.tabBar-item-body {
			&.float {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.tabBar-item-icon {
					width: 146rpx;
					height: 146rpx;
					border-radius: 50px;
					background-color: $uni-color-primary;
					display: flex;
					align-items: center;
					border: 14rpx solid white;
					margin-top: -50%;
				}
			}

			&.active {
				color: $uni-color-success;
			}
		}

		.tabBar-item-icon {
			display: flex;
			justify-content: center;
		}

		.tab-bar-text {
			font-size: 28rpx;
			margin-top: 8rpx;
		}
	}
</style>